import React, { useState, memo, useCallback, useMemo } from "react";

const Child = memo((props) => {
  console.log("child");
  return <div>Child---m:{props.m}</div>;
});

// memo 、useEffect、useCallback
export default function App() {
  const [n, setN] = useState(0);
  const [m, setM] = useState(0);

  const onChange = useCallback(() => {}, []);

  return (
    <div>
      <h1>
        App---n:{n}---m:{m}
      </h1>
      <button onClick={() => setN(n + 1)}>setN</button>
      <button onClick={() => setM(m + 1)}>setM</button>
      <Child m={m} onChange={onChange} />
    </div>
  );
}
